import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { defalutImg } from 'src/app/comm';
import { NzMessageService } from 'ng-zorro-antd/message';
import { HairShellService } from '../hair-shell.service';

@Component({
  selector: 'app-hair-shell-details',
  templateUrl: './hair-shell-details.component.html',
  styleUrls: ['./hair-shell-details.component.scss']
})
export class HairShellDetailsComponent implements OnInit {

  detailLoading: boolean = false;
  routeParams: any = {};
  fallback: string = defalutImg;

  redPacketInfo: any = {}; // 基本信息
  redPacketRecord: any = []; // 领取详情

  tableParams: any = {
    page: 1,
    pageSize: 20,
    total: 0
  };

  // Modal
  isVisible: boolean = false;
  modalTableData: any = [];
  modalTbaleLoading: boolean = false;

  activeItems: any = {};
  modalTableParams: any = {
    page: 1,
    pageSize: 10,
    total: 0
  };

  constructor(
    private activatedRoute: ActivatedRoute,
    private message: NzMessageService,
    private services: HairShellService
  ) {
    activatedRoute.queryParams.subscribe((res: any) => {
      // console.log('router', res);
      this.routeParams = res || {};
    });
  }

  ngOnInit(): void {
    this.loadDetailData();
  }

  // 详情
  async loadDetailData() {
    try {
      let params = {
        id: this.routeParams.id,
        page: this.tableParams.page,
        pageSize: this.tableParams.pageSize
      }
      this.detailLoading = true;
      const res: any = await this.services.getPhoneShellDetail(params);
      
      this.detailLoading = false;
      if (res.code == 0) {
        const { redPacketInfo, redPacketRecord }: any = res.data || {};
        this.redPacketInfo = redPacketInfo || {};

        this.redPacketRecord = redPacketRecord.records || [];
        this.tableParams.total = redPacketRecord.total || 0;
      } else {
        this.message.error(res.message || '详情获取失败');
      }
    } catch (error: any) {
      this.detailLoading = false;
      this.tableParams.total = 0;
      this.message.error(error);
    }
  }

  // 使用详情
  async getUseDetailData(item: any) {
    try {
      let params = {
        id: item.id, // 用户领取红包记录id
        userId: item.userId, // 用户id
        page: this.modalTableParams.page,
        pageSize: this.modalTableParams.pageSize
      }
      this.modalTbaleLoading = true;
      const res: any = await this.services.getPhoneUseDetail(params);
      
      this.modalTbaleLoading = false;
      if (res.code == 0) {
        const { records, total } = res.data || {};

        this.modalTableData = records || [];
        this.modalTableParams.total = total || 0;
      } else {
        this.message.error(res.message || '使用详情获取失败');
      }
    } catch (error: any) {
      this.modalTbaleLoading = false;
      this.modalTableData = [];
      this.modalTableParams.total = 0;
      this.message.error(error);
    }
  }
  openModal(item: any) {
    this.activeItems = item;
    this.getUseDetailData(item);
    this.isVisible = true;
  }
  handleCancel() {
    this.isVisible = false;
  }

  // 当前页码改变时的回调函数
  onPageIndexChange(index: number, tnum: number) {
    if (tnum == 0) {
      this.tableParams.page = index;
      this.loadDetailData();
    } else {
      this.modalTableParams.page = index;
      this.getUseDetailData(this.activeItems);
    }
  }
  // 页数改变时回调
  onPageSizeChange(sizeNum: number, tnum: number) {
    if (tnum == 0) {
      this.tableParams.page = 1;
      this.tableParams.pageSize = sizeNum;
      this.loadDetailData();
    } else {
      this.modalTableParams.page = 1;
      this.modalTableParams.pageSize = sizeNum;
      this.getUseDetailData(this.activeItems);
    }
  }
}
